<template>
  <div class="container">
    <el-form label-width="70px" :model="query">
      <div class="search">
        <el-form-item label="评论内容">
          <el-input v-model="query.content" placeholder="请输入评论内容"></el-input>
        </el-form-item>
<!--        
        <el-form-item label="状态">
          <el-select v-model="form.region1" placeholder="请选择分类">
            <el-option label="通过" value="shanghai"></el-option>
            <el-option label="未通过" value="beijing"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="时间:" label-width="100px">
          <el-date-picker
             v-model="time"
             type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
             range-separator="至"
              :default-time="['00:00:00', '23:59:59']"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
         </el-date-picker>
     </el-form-item> -->
     <el-form-item label="发布人">
      <el-input v-model="query.userName" placeholder="请输入新闻发布人"></el-input>
    </el-form-item>
        <div style="margin-left: 1rem;">
          <el-button type="primary" @click="seac">搜索</el-button>
          <el-button type="primary" @click="resert">重置</el-button>
        </div>
      </div>
    </el-form>
    <div class="examine">
      <!-- <el-button type="primary" @click="approve">审批通过</el-button>
      <el-button type="info" @click="commentsRejected">驳回评论</el-button> -->
      <el-button type="danger" @click="commentsDelete">删除评论</el-button>
      <el-button type="info" @click="commentsTop">置顶</el-button>
      <el-button type="danger" @click="commentsUntop">取消置顶</el-button>
    </div>
    <div class="tables">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="newsName" label="标题" width="120">
        </el-table-column>
        <el-table-column prop="creatorName" label="发布人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="评论时间" width="120" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column prop="content" label="内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="审批状态">
          <template slot-scope="scope">
            <span v-if="scope.row.isCheck=='0'">未审批</span>
            <span v-if="scope.row.isCheck=='1'">审批通过</span>
            <span v-if="scope.row.isCheck=='2'">审批不通过</span>
          </template>
        </el-table-column>
        <el-table-column label="置顶状态">
          <template slot-scope="scope">
            <span v-if="scope.row.isTop=='0'">未置顶</span>
            <span v-if="scope.row.isTop=='1'">置顶</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="viewDetails(scope.$index, scope.row)">删除</el-button></el-button></el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">置顶</el-button>
          </template>

        </el-table-column> -->
      </el-table>
      <div class="pagination">
          <pagination :query="query" @getData="getData" :total="total" />
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination';
import { commentsFindPagePc,approve,commentsDelete,commentsRejected,commentsTop,commentsUntop } from '../../api/index';
  export default {
    name: 'invitation',
    components: { Pagination },
    data() {
      return {
        time:'',
        form: {
         
          region: '',
          region1: '',
        },
        query: {
        content: '',
        offset: 1,
        limit: 10,
        userName:''
      },
        tableData: [],
        multipleSelection: [],
        total:0
      };
    },
    created() {
      this.getData()
    },
    methods: {
      async approve(){//审批
        let data = await this.$publicJS.delConfirm("是否审批");
        if (data) {
        const ids = this.multipleSelection.map(item => item.id).join(',');
        let result = await approve({ids:ids})
        if(result.data.status == 100){
          this.$message.success('审批通过')
          this.getData()

        }
      }
      },
      async commentsTop(){//置顶
        let data = await this.$publicJS.delConfirm("是否置顶");
        if (data) {
        const ids = this.multipleSelection.map(item => item.id).join(',');
        let result = await commentsTop({ids:ids})
        if(result.data.status == 100){
          this.$message.success('置顶成功')
          this.getData()

        }
      }
      },
      async commentsUntop(){//取消置顶
        let data = await this.$publicJS.delConfirm("是否取消置顶");
        if (data) {
        const ids = this.multipleSelection.map(item => item.id).join(',');
        let result = await commentsUntop({ids:ids})
        if(result.data.status == 100){
          this.$message.success('取消置顶成功')
          this.getData()

        }
      }
      },
      async commentsRejected(){//驳回审批
        let data = await this.$publicJS.delConfirm("是否驳回");
        if (data) {
        const ids = this.multipleSelection.map(item => item.id).join(',');
        let result = await commentsRejected({ids:ids})
        if(result.data.status == 100){
          this.$message.success('驳回成功')
          this.getData()

        }
      }
      },
      async commentsDelete(){//删除
        let data = await this.$publicJS.delConfirm("是否删除评论");
        if (data) {
        const ids = this.multipleSelection.map(item => item.id).join(',');
        let result = await commentsDelete({ids:ids})
        if(result.data.status == 100){
          this.$message.success('删除成功')
          this.getData()

        }
      }
      },
      seac(){
        this.getData()
      },
      resert(){
         this.query.content='';
         this.query.userName = ''
         this.getData()
      },
      async getData(){
        let result = await commentsFindPagePc(this.query)
        if(result.data.status == 100){
          this.tableData = result.data.data.list
          this.total =  result.data.data.total
        }
      },
      viewDetails(){
        this.$router.push({ path: '/newsDetails', })
      },
      news() {
        this.$router.push({ path: '/newNews', })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  };
</script>

<style scoped>
  .search {
    display: flex;
    flex-flow: wrap;
    margin-bottom: 2rem;
  }

  .tables {
    margin: 0 1rem;
  }
  .examine{
    margin-left: 15px;
    margin-bottom: 15px;
  }
</style>